function show_goods() {
    let listinfo = []; //存放价格排序后的数据
    let listinfo_default = []; //数据库中导入的元素数据

    $.ajax({
        url: "http://10.31.157.19/myule/php/list.php",
        dataType: 'json'
    }).done(function(data) {
        let mygoods_data = data.pagecontent;
        let str = "";
        $.each(mygoods_data, function(index, value) {
            str += `
                <li>
                    <a href='detail.html?sid=${value.sid}'>
                        <img data-original=${value.picurl} class="lazy">
                        <p>${value.title}</p>
                        <span>￥${value.price}</span>
                    </a>
                </li>
            `;
        });
        $(".goodslist ul").html(str);
        //每次重新加载就将之前的数据清空再导入
        listinfo = [];
        listinfo_default = [];
        $(".goodslist ul li").each(function(index, value) {
            listinfo.push($(value));
            listinfo_default.push($(value));
        });
        $(function() {
            $("img.lazy").lazyload({ effect: "fadeIn" });
        });

        $(".page").pagination({ //分页加载
            pageCount: data.pagesize,
            jump: true,
            prevContent: "<",
            nextContent: ">",
            callback: function(currentPage) { //这里的回调函数只有在点击换页的时候触发
                $.ajax({
                    url: "http://10.31.157.19/myule/php/list.php",
                    data: { page: currentPage.getCurrent() },
                    dataType: "json"
                }).done(function(currentData) {
                    let myData = currentData.pagecontent;
                    let str = "";
                    $.each(myData, function(index, value) {
                        str += `
                        <li>
                            <a href='detail.html?sid=${value.sid}'>
                                <img data-original=${value.picurl} class='lazy'>
                                <p>${value.title}</p>
                                <span>￥${value.price}</span>
                            </a>
                        </li>
                        `;
                    });
                    $(".goodslist ul").html(str);
                    //换页就得将之前的数据清空 ，再重新导入新数据
                    listinfo = [];
                    listinfo_default = [];
                    $(".goodslist ul li").each(function(index, value) {
                        listinfo.push($(value));
                        listinfo_default.push($(value));
                    });
                    $("img.lazy").lazyload({ effect: "fadeIn" });
                });


            }
        });


        //默认排序
        $(".paixu button").eq(0).on("click", function() {
            $.each(listinfo_default, function(index, value) {
                $(".goodslist ul").append(value);
            });
        });

        //价格升序排序 (冒泡)
        $(".paixu button").eq(1).on("click", function() {
            for (let i = 0; i < listinfo.length - 1; i++) {
                for (let j = 0; j < listinfo.length - 1 - i; j++) {
                    let prePrice = parseFloat(listinfo[j].find("span").html().substring(1));
                    let nextPrice = parseFloat(listinfo[j + 1].find("span").html().substring(1));
                    if (prePrice > nextPrice) {
                        let temp = listinfo[j];
                        listinfo[j] = listinfo[j + 1];
                        listinfo[j + 1] = temp;
                    }
                }
            }
            $.each(listinfo, function(index, value) {
                $(".goodslist ul").append(value); //追加元素 如果原来的结构中有就
            })
        });



        //价格降序排序 (冒泡)
        $(".paixu button").eq(2).on("click", function() {
            for (let i = 0; i < listinfo.length - 1; i++) {
                for (let j = 0; j < listinfo.length - 1 - i; j++) {
                    let prePrice = parseFloat(listinfo[j].find("span").html().substring(1));
                    let nextPrice = parseFloat(listinfo[j + 1].find("span").html().substring(1));
                    if (prePrice < nextPrice) {
                        let temp = listinfo[j];
                        listinfo[j] = listinfo[j + 1];
                        listinfo[j + 1] = temp;
                    }
                }
            }
            $.each(listinfo, function(index, value) {
                $(".goodslist ul").append(value); //追加元素 如果原来的结构中有就
            })

        });
    });
    //获取本地的用户信息并且渲染到页面
    function get_username() {
        if (localStorage.getItem("tel")) {
            $(".login_registry").css({ display: "none" });
            let str = "<span>退出</span>";
            $(".showName").html("尊敬的" + localStorage.getItem("tel") + str);
        }
    }
    //渲染的结构 要使用事件委托
    $(".showName").on("click", "span", function() {
        localStorage.removeItem("tel");
        $(".login_registry").css({ display: "inline" });
        $(".showName").html("");
    });
    get_username();

}
show_goods();